<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
	{{message}}
</div>

<div id="app-2">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定！！
    </span>
</div>

<div id="app-3">
    <p v-if="seen">现在你看到我了！！</p>
</div>

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>

<div id="app-5">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<div id="app-7">
    <ol>
        <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id">
        </todo-item>
    </ol>
</div>

<script>
var app=new Vue({
	el:'#app',
	data:{
	message:'Hello Vue!'
	}

})

var app2 = new Vue({
    el: '#app-2',
    data:{
        message: '页面加载于' + new Date().toLocaleString()
    }
})

var app3=new Vue({
    el:'#app-3',
    data:{
        seen:true
    }
})

var app4=new Vue({
    el:"#app-4",
    data:{
        todos:[
            {text:'学习 Javascript'},
            {text:'学习 Vue'},
            {text:'整个牛逼项目'}
        ]
    }
})

var app5=new Vue({
    el:"#app-5",
    data:{
        message:'Hello Vue.js!'
    },
    methods:{
        reverseMessage:function(){
            this.message = this.message.split('').reverse().join('')
        }
    }
})

var app6=new Vue({
    el:'#app-6',
    data:{
        message: 'Hello Vue'
    }
})

//component added
Vue.component('todo-item',{
    props:['todo'],
    template:'<li>{{todo.text}}</li>'
})


var app7=new Vue({
    el:"#app-7",
    data:{
        groceryList:[
            {id:0,text:"蔬菜"},
            {id:1,text:"奶酪"},
            {id:2,text:"随便其他人吃什么东西!"}
        ]
    }
})
</script>